<template>
  <BasicModal
    ref="showActionModal"
    :title="`环境变量.${variableSettings.length}项`"
    width="800px"
    @emit-callback-fn="modalCallbackFn"
    :showCloseBtn="false"
    :showOkBtn="false"
  >
    <template #content>
      <div class="variable-box" v-if="variableSettings.length > 0">
        <div class="variable-title" :style="{ paddingRight: variableSettings.length > 10 ? '7px' : 0 }">
          <span v-for="(item, index) in environmentColumn" :key="index">{{ item }}</span>
        </div>
        <div class="variable-list">
          <div class="variable-item" v-for="(item, index) in variableSettings" :key="index">
            <div class="variable-item-left">{{ item.name }}</div>
            <div class="variable-item-right">{{ item.defaultValue }}</div>
          </div>
        </div>
      </div>
      <BasicEmpty v-else />
    </template>
  </BasicModal>
</template>

<script setup lang="ts">
const environmentColumn = ['变量名称', '变量值'];
const variableSettings = ref<Pipeline.VariableSetting[]>([]);
const showActionModal = ref<any>(false);

const props = defineProps<{
  list: Pipeline.VariableSetting[];
}>();

watch(
  () => props.list,
  (val) => {
    variableSettings.value = val || [];
  },
  {
    immediate: true,
  },
);

const modalCallbackFn = async () => {
  hideModal();
};

const showModal = () => {
  showActionModal.value.showModal();
};

const hideModal = () => {
  showActionModal.value.hideModal();
};

defineExpose({
  showModal,
  hideModal,
});
</script>

<style lang="less" scoped>
.variable-box {
  width: 100%;
  border-right: 1px solid rgba(231, 239, 248, 1);
  border-left: 1px solid rgba(231, 239, 248, 1);
  margin-bottom: 24px;
  .variable-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f5f9fc;
    > span {
      display: inline-block;
      flex: 1;
      height: 32px;
      line-height: 32px;
      text-align: center;
      box-shadow: inset -1px 0px 0px 0px rgba(237, 243, 251, 1);
      box-shadow: inset 0px -1px 0px 0px rgba(237, 243, 251, 1);
      font-size: 14px;
      color: rgba(0, 0, 0, 0.6);
      font-weight: 400;
      &:nth-child(odd) {
        border-right: 1px solid rgba(231, 239, 248, 1);
      }
    }
  }
  .variable-list {
    width: 100%;
    max-height: 426px;
    overflow-y: auto;
    .variable-item {
      display: flex;

      justify-content: space-between;
      align-items: center;
      height: 42px;
      border-bottom: 1px solid rgba(231, 239, 248, 1);
      font-size: 14px;
      color: rgba(0, 0, 0, 0.8);
      font-weight: 400;
      .variable-item-left {
        flex: 1;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-left: 10px;
        height: 100%;
        border-right: 1px solid rgba(231, 239, 248, 1);
      }
      .variable-item-right {
        flex: 1;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 100%;
        padding-left: 10px;
      }
    }
  }
}
</style>
